// map.js
import qqMap from '../../../utils/qqmap'

Page({
  data: {
    // 中心点的经纬度
    // 121.618713,31.040674
    latitude: 31.040674,
    longitude: 121.618713,
    // 维修的起点和终点
    // 121.506379,31.245414
    markers: [
      {
        id: 1,
        latitude: 31.040674,
        longitude: 121.618713,
        width: 24,
        height: 30,
      },
      {
        id: 2,
        latitude: 31.245414,
        longitude: 121.506379,
        width: 24,
        height: 30,
      },
    ],
    repairDetail: {},
    dialogVisible: false,
  },

  // ---------------生命周期钩子函数-begin----------------
  onLoad({ id }) {
    this.getRepairDetail(id)
  },
  // ---------------生命周期钩子函数-end------------------

  // ---------------自定义函数-begin-----------------------
  // 1. 获取报修详情
  async getRepairDetail(id) {
    // id 不存在就不必发请求了
    if (!id) return
    // 请求数据接口
    const { code, data: repairDetail } = await wx.http.get('/repair/' + id)
    // 校验接口调用结果
    if (code !== 10000) return wx.utils.toast('获取报修详情失败!')
    // 渲染报修详情
    this.setData({ ...repairDetail })

    // 判断(只有是上门中状态才进行路线绘制)
    // console.log(this.data.status)
    if (this.data.status === 2) {
      this.createPolyLine()
    }
  },

  // 2. 展示取消确认框
  showDialog() {
    this.setData({
      dialogVisible: true,
    })
  },

  // 3. 关闭确认框
  dialogClose(ev) {
    ev.detail === 'confirm' && this.cancelRepair()
  },

  // 4. 取消报修
  async cancelRepair() {
    // 4.1 调用接口
    const { code } = await wx.http.put(`/cancel/repaire/${this.data.id}`)
    if (code !== 10000) return wx.utils.toast('取消报修失败')
    wx.utils.toast('取消报修成功')
    // 4.2 回到列表页
    wx.navigateBack()
  },

  // 5. 修改报修信息
  editRepair() {
    wx.navigateTo({
      url: '/repair_pkg/pages/form/index?id=' + this.data.id,
    })
  },

  // 6. 绘制路线
  createPolyLine() {
    const { markers } = this.data
    qqMap.direction({
      mode: 'driving',
      from: [markers[0].latitude, markers[0].longitude].join(','),
      to: [markers[1].latitude, markers[1].longitude].join(','),
      success: (res) => {
        // console.log(res)
        var ret = res
        const coors = ret.result.routes[0].polyline,
          pl = []
        //坐标解压（返回的点串坐标，通过前向差分进行压缩）
        const kr = 1000000
        for (let i = 2; i < coors.length; i++) {
          coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr
        }
        //将解压后的坐标放入点串数组pl中
        for (let i = 0; i < coors.length; i += 2) {
          pl.push({ latitude: coors[i], longitude: coors[i + 1] })
        }
        console.log(pl)

        markers.push({
          id: 3,
          latitude: pl[200].latitude,
          longitude: pl[200].longitude,
          iconPath: '/static/images/marker.png',
          width: 30,
          height: 40,
        })

        //设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
        this.setData({
          latitude: pl[0].latitude,
          longitude: pl[0].longitude,
          polyline: [
            {
              points: pl, // 点的经纬度数组
              color: '#5591af', // 绘制的路线演示
              width: 6, // 绘制路线的宽度
            },
          ],
          markers,
        })
      },
      fail: function (error) {
        console.error(error)
      },
    })
  },
  // ---------------自定义函数-end-------------------------
})
